<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="./js/echarts.min.js"></script>


</head>

<body>
	<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
<script>
	var myChart = echarts.init(document.getElementById('map'));
	$.get('./json/jian.json', function (geoJson) {
		echarts.registerMap('jian', geoJson, {});
		var option = {
			geo: {
				map: 'jian',
				label: {
					emphasis: {
						show: true,
						color: '#fff'
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#00186E',
						borderColor: '#195BB9',
						borderWidth: 1,
					},
					emphasis: {
						areaColor: '#2B91B7'
					}
				}
			},
			series: [
				{
					type: 'map',
					mapType: 'jian',
					aspectScale: 0.85,  //地图长度比
					coordinateSystem: 'geo',
				}
			]
		};
		myChart.setOption(option);
	});
</script>

</html>